<template>
  <div class="sidebar-wrapper">
    <!-- 侧边栏内容 - 控制显示/隐藏 -->
    <div
        class="sidebar-content"
        :class="{ 'hidden': !isVisible }"
    >
      <div
          v-for="(item, index) in sidebarItems"
          :key="index"
          class="sidebar-item"
          @click="handleItemClick(item)"
      >
        <!-- 图标 -->
        <el-icon :size="24" class="item-icon">
          <component :is="item.icon" />
        </el-icon>
        <!-- 文字（显示在图标下方） -->
        <span class="item-text">{{ item.text }}</span>
        <!-- 消息徽章 -->
        <el-badge
            v-if="item.badge"
            :value="item.badge"
            class="item-badge"
        />
      </div>
    </div>

    <!-- 切换按钮 - 箭头方向随状态变化 -->
    <div
        class="toggle-btn"
        @click="toggleSidebar"
    >
      <el-icon :size="20">
        <!-- 侧边栏显示时显示向右箭头（用于隐藏），隐藏时显示向左箭头（用于显示） -->
        <ArrowRight v-if="isVisible" />
        <ArrowLeft v-else />
      </el-icon>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue';
import { ElIcon, ElBadge } from 'element-plus';
import CartApi from '@/api/cart.js'
import {
  ShoppingCart,
  ArrowLeft,
  ArrowRight, ShoppingBag
} from '@element-plus/icons-vue';
import {useRouter} from "vue-router";

const router = useRouter();
// 侧边栏显示状态（默认显示）
const isVisible = ref(true);

// 侧边栏数据
const sidebarItems = ref([
  {
    text: '购物车',
    icon: ShoppingCart,
    badge: '0',
    link: '/cart'
  },
    {
    text: '订单',
    icon: ShoppingBag,
    link: '/orderItems'
  },
]);
// 获取购物车数量
const fetchCartCount = async () => {
  sidebarItems.value[0].badge = await CartApi.getCount();
};
onMounted(async () => {
  await fetchCartCount()
})
// 切换侧边栏显示/隐藏
const toggleSidebar = () => {
  isVisible.value = !isVisible.value;
};

// 点击菜单项
const handleItemClick = (item) => {
  router.push(item.link);
};
// 监听路由变化，进入购物车页面后刷新数量
watch(
    () => router.currentRoute.value.path,
    (newPath) => {
      if (newPath === '/cart') {
        fetchCartCount(); // 进入购物车页面时刷新数量
      }
    }
);
</script>

<style scoped>
.sidebar-wrapper {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 999;
}

/* 侧边栏内容区域 */
.sidebar-content {
  background-color: #fff;
  border-radius: 12px 0 0 12px;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  padding: 15px 10px;
  transition: all 0.3s ease;
}

/* 隐藏状态 */
.sidebar-content.hidden {
  width: 0;
  padding: 0;
  overflow: hidden;
}

/* 菜单项 - 图标在上文字在下 */
.sidebar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  padding: 12px 5px;
  margin: 5px 0;
  cursor: pointer;
  border-radius: 8px;
  position: relative;
}

.sidebar-item:hover {
  background-color: #f5f5f5;
}

/* 图标样式 */
.item-icon {
  color: #ff5722;
  margin-bottom: 6px;
}

/* 文字样式 */
.item-text {
  font-size: 12px;
  color: #333;
  white-space: nowrap;
}

/* 消息徽章 */
.item-badge {
  position: absolute;
  top: 2px;
  right: 8px;
}

/* 切换按钮 */
.toggle-btn {
  width: 40px;
  height: 40px;
  background-color: #ff5722;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  margin-left: 10px; /* 与侧边栏保持距离 */
}

.toggle-btn:hover {
  background-color: #e64a19;
  transform: scale(1.05);
}

/* 侧边栏隐藏时按钮位置调整 */
.sidebar-content.hidden + .toggle-btn {
  margin-left: 0;
}
</style>
